<template>
  <div class="tab_home">
    <van-nav-bar
      title="绑定样本"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-field
        v-model="sampleCode"
        center
        clearable
        placeholder="请输入/扫一扫样本条形码"
      >
        <van-button slot="button" size="small" type="primary" v-on:click="sys_click">扫一扫</van-button>
      </van-field>
      <van-field
        v-model="name"
        placeholder="请输入检测人真实姓名"
        error-message=""
      />
      <van-field
        v-model="phone"
        placeholder="请输入检测人手机号码"
        error-message=""
      />
      <van-cell
        :value="detail"
        icon="shop-o" is-link
        v-on:click="selectDetail"
        @click="selectItem"
      >
        <template slot="title">
          <span class="custom-text">选择套餐</span>
          <div v-if="bindproduct" class="van-cell__value">
<!--            <span data-v-00302f26="">神奇小体验1</span>-->
          </div>
        </template>
      </van-cell>

    </van-cell-group>
    <van-button type="primary" size="large" v-on:click="bind">绑定</van-button>
    <van-popup v-model="show" position="bottom" :overlay="true">
      <van-picker
        show-toolbar
        title="选择需要绑定的套餐"
        :columns="detailsToPicker"
        @cancel="onCancel"
        @confirm="onConfirm"
        :default-index="0"
        value=''
        @change="onChange"/>
    </van-popup>
  </div>
</template>

<script>

import { Toast, NavBar, Button, CellGroup, Field, Picker, Popup, Cell, Tag } from 'vant'
import wx from 'weixin-js-sdk'
import { mapActions, mapMutations } from 'vuex'
export default {
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Cell.name]: Cell,
    [Tag.name]: Tag
  },
  data () {
    return {
      order: null,
      sampleCode: null,
      name: null,
      phone: null,
      detailsToPicker: [],
      // '1', '2'
      show: false,
      detail: null,
      selectedDetail: null,
      bindproduct: false
      // goods: { title: '' }
    }
  },
  async created () {
    await this.getOrder(this.$route.params.id)
  },
  computed: {
    title () {
      return this.goods ? this.goods.title : '商品详情'
    }
    // detailsToPicker () {
    //   return this.order ? this.order.order_details.map(item => item.product.name) : []
    // },
  },
  methods: {

    selectItem () {
      // 有的话返回商品名 没有就返回空
      // console.log(this.order.order_details)
      // var x = this.order.order_details[0].quantity
      // 老师改成了多个orderdetail 每个里面放不同的产品
      let x = this.order.order_details
      // console.log(x)
      this.detailsToPicker = []
      for (let i = 0; i < x.length; i++) {
        console.log(this.order.order_details[i].product.title + '11')
        // this.value.push('123')
        this.detailsToPicker.push('NO' + ( i+1 +':') + this.order.order_details[i].product.title )
      }
    },
    async getOrder (id) {
      const { data } = await this.$api.order.orderDetail(id)
      // console.log(data.data.order_details[0].product.title)
      // 为了让数据显示一个初始值在给定位置
      this.detail = 'No1:' + data.data.order_details[0].product.title
      console.log(typeof this.detail)
      if (data.code === 200) {
        this.order = data.data
      } else {
        Toast(data.desc)
        console.log(this.order)
      }
    },
    // async getProduct (id) {
    //   const { data } = await this.$api.product.productDetail(id)
    //   console.log(data)
    //   if (data.code !== 200) {
    //     Toast(data.desc)
    //   } else {
    //     this.goods = data.data
    //     this.goodsId = data.data ? data.data.id : 0
    //   }
    // },
    onClickLeft () {
      this.$router.go(-1)
    },
    scan (data) {
      this.$router.push({ 'name': 'scanner' })
    },
    async bind () {
      const { data } = await this.$api.order.codeBind({
        order_detail_id: this.selectedDetail.id,
        sample_code: this.sampleCode,
        sample_full_name: this.name,
        sample_phone: this.phone
      })
      if (data.code === 200) {
        Toast('绑定成功')
      } else {
        Toast(data.desc)
      }
    },
    selectDetail () {
      this.show = true
    },
    onChange (picker, value, index) {
    },
    onCancel (value, index) { this.show = false },
    onConfirm (value, index) {
      this.show = false
      this.detail = value
      this.selectedDetail = this.order.order_details[index]
    },
    // ---------------------------------
    // 调用api中的方法拿到url 用axios 不需要用jquery
    sys_click () {
      // 这里【url参数一定是去参的本网址】
      // $.get("获取微信认证参数的地址?url=去参的本网页地址", function( data ) {
      const { data } = this.$api.wechat.verify()
      console.log(data)
      wx.config({
        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        debug: true,
        // 必填，公众号的唯一标识
        appId: ' wx6a75c84b50b0939f',
        // 必填，生成签名的时间戳
        // timestamp: '' + data.timestamp,
        timestamp: '123',
        // 必填，生成签名的随机串
        // nonceStr: data.nonceStr,
        nonceStr: '222',
        // 必填，签名
        // signature: data.signature,
        signature: '333',
        // 必填，需要使用的JS接口列表，所有JS接口列表
        jsApiList: ['checkJsApi', 'scanQRCode', 'chooseImage']
      })
      // })

      wx.error(function (res) {
        alert('出错了：' + res.errMsg)
        // 这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
      })
      // config信息验证成功后就会执行ready方法,所有接口调用都必须在config接口获得结果之后
      wx.ready(function () {
        wx.checkJsApi({ // 判断当前客户端版本是否支持指定JS接口
          jsApiList: ['scanQRCode'],
          success: function (res) {

          }
        })
        wx.scanQRCode({ // 微信扫一扫接口
          desc: 'scanQRCode desc',
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
            const getCode = res.resultStr // 当needResult 为 1 时，扫码返回的结果
            alert(getCode)
          }
        })
        // wx.scanQRCode({
        //   needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        //   scanType: ['qrCode'], // 可以指定扫二维码还是一维码，默认二者都有
        //   success: function (res) {
        //     var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
        //     alert('扫描结果：' + result)
        //     window.location.href = result // 因为我这边是扫描后有个链接，然后跳转到该页面
        //   }
        // })

      })
    }

  },
  mounted () {

  }
}
</script>

<style scoped>
  .van-cell-group {
    background-color: #969799;
    margin: 10px 20px 0 20px;
  }
  .van-button--large {
    width: 90%;
    margin: 20px 0 0 20px;
    height: 3.125rem;
  }
  .van-cell__value {
    color: #969799;
    overflow: hidden;
    text-align: right;
    white-space: nowrap;
    position: relative;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
</style>
